<template>
  <div class="phone-container">
    <h2>图片详情</h2>
    <!-- <h2>{{photoinfo.title}}</h2> -->
    <p class="subtitle">
      <span>发表时间:2020-08-25</span>
      <span>点击:56次</span>
      <!-- <span>发表时间:{{photoinfo.add_time | dataFormat}}</span>
      <span>点击:{{photoinfo.click}}次</span>-->
    </p>
    <hr />
    <!-- 缩略图 -->
    <div class="sg">
      <img
        class="preview-img"
        v-for="(item,index) in list"
        :key="item.src"
        :src="item.src"
        height="100"
        @click="$preview.open(index,list)"
      />
    </div>
    <!-- 图片内容评论区域 -->
    <!-- <div class="content" v-html="photoinfo.content"></div> -->

    <div class="content">说出你想说的话!</div>

    <!-- 评论的子组件 -->
    <cmt-box></cmt-box>
    <!-- <cmt-box :id="id"></cmt-box> -->
  </div>
</template>
<script>
//导入评论子组件
import commend from '../subcompontens/comment.vue'
export default {
  data () {
    return {
      id: this.$route.params.id,            //获取id
      photoinfo: {},            //图片详情  
      //   list: []    
      list: [{
        src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1586305838,2802075170&fm=26&gp=0.jpg',
        w: 600,
        h: 400,
      },
      {
        src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3498075566,3901867213&fm=26&gp=0.jpg',
        w: 600,
        h: 400,
      },
      {
        src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597644205048&di=dff60e18be128eae04ce4ff5302d4b6f&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F11%2F01%2F058e80a2245c8f03d9b88b56b5d8ebef.jpg',
        w: 600,
        h: 400,
      },
      {
        src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3296847860,343493098&fm=26&gp=0.jpg',
        w: 600,
        h: 400,
      },
      ]
    };
  },
  created () {
    this.getPhotoInfo();
    this.getPhotoInfo();
  },
  methods: {
    getPhotoInfo () {
      //获取图片详情
      this.$http.get("api/getimageInfo" + this.id).then(result => {
        this.photoinfo = result.body.message[0];
      })
    },
    // getPhotoInfo () {
    //   this.$http.get('api/getthumimages' + this.id).then(result => {
    //     if (result.body.status == 0) {
    //       //循环每个图片数据,加宽高
    //       result.body.message.forEach(item => {
    //         item.w = 600
    //         item.h = 400
    //       });
    //       this.list = result.body.message;

    //     }

    //   })
    // }
  },
  components: {
    'cmt-box': commend    //注册子组件
  }
} 
</script>

<style lang="scss" scoped>
.phone-container {
  padding: 3px;
  h2 {
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .content {
    font-size: 13px;
    line-height: 20px;
  }
}

.sg {
  img {
    margin: 10px;
    box-shadow: 0 0 8px #999;
  }
}
</style>